<template>
    <div>
        <v-row>
            <v-col>
                <v-text-field
                        ref="email"
                        :label="label"
                        :value="email"
                        @input="$emit('update:email', $event)"
                        :rules="[emailRule]"
                >
                </v-text-field>
            </v-col>
        </v-row>
        <v-row>
            <v-col cols="7">
                <v-text-field
                        @keypress.enter="$emit('update')"
                        label="验证码"
                        :value="code"
                        @input="$emit('update:code', $event)"
                        :rules="[verificationRule]"
                >
                </v-text-field>
            </v-col>
            <v-col cols="5">
                <v-btn
                        id="codeBtn"
                        @click="getCode"
                        class="mt-3"
                        color="warning"
                        outlined
                        block
                        :loading="codeBtn.loading"
                        :disabled="!codeBtn.flag"
                >
                    {{codeBtn.text}}
                </v-btn>
            </v-col>
        </v-row>
    </div>
</template>

<script>
    import {verificationRule, emailRule} from "../../util/rule";

    export default {
        name: "MyCodeInput",
        props: {
            label: {
                default: '邮箱'
            },
            isRegister: {
                type: Boolean,
                default: false
            },
            email: String,
            code: String
        },
        data() {
            return {
                emailRule,
                verificationRule,
                codeBtn: {
                    flag: true,
                    loading: false,
                    text: '获取验证码'
                }
            }
        },
        methods: {
            getCode() {
                let _this = this;
                if (_this.$refs['email'].validate()) {
                    _this.codeBtn.loading = true;
                    _this._get({
                        url: 'open/get-verification-code',
                        params: {
                            email: _this.email,
                            isRegister: _this.isRegister
                        }
                    }).then((rsp) => {
                        let code = rsp.data.code;
                        if (code === '00000') {
                            _this.$success({message: '验证码发送成功'});
                            // 调用按钮倒计时
                            _this.codeBtn.flag = false;
                            _this.codeBtn.text = 60;
                            // 倒计时任务
                            let interval = setInterval(() => {
                                if (_this.codeBtn.text === 1) {
                                    _this.codeBtn.text = '获取验证码';
                                    _this.codeBtn.flag = true;
                                    clearInterval(interval);
                                    return;
                                }
                                _this.codeBtn.text--;
                            }, 1000);
                        } else {
                            _this.$error({message: rsp.data.msg});
                        }
                    }).catch((error) => {
                        console.log(error)
                        _this.$error({message: '服务器繁忙'});
                    }).finally(() => {
                        _this.codeBtn.loading = false;
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>